<demo>
  自动轮播
</demo>

<template>
  <div class="home-banner">
    <Slide :sliders="sliders" :autoPlay="true" :duration="1500" />
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import Slide from '../lib/Slide.vue'
import imgUrl1 from '/imgs/11.jpg'
import imgUrl2 from '/imgs/22.jpg'
import imgUrl3 from '/imgs/33.jpg'


    const sliders = reactive([
  { imgUrl: imgUrl1 },
  { imgUrl: imgUrl2 },
  { imgUrl: imgUrl3 },
])

</script>
<style scoped lang="scss">
.home-banner {
  width: 750px;
  height: 500px;
}
h3 {
  font-size: 20px;
  margin-bottom: 15px;
}
@media (max-width: 500px) {
  .home-banner {
    width: 100%;
    height: 241px;
  }
}
</style>